<template>
	<view class="tab">
		<scroll-view class="tab-croll" scroll-x>
			<view class="tab-scroll_box">
				<view class="tab-scroll_item" :class="{active:activeIndex ===index}" v-for="(item, index) in list" :key="index" @click="clickTab(item,index)">{{item.name}}</view>
			</view>
		</scroll-view>
		<view class="tab-icons" @click="open">
			<uni-icons class="icon" type="gear" size="26" color="#666"></uni-icons>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			list:{
				type:Array,
				default(){
					return []
				}
			},
			tabIndex:{
				type:Number,
				default:0
			}
		},
		//watch 监听data propsz值的变化
		watch:{
			tabIndex(newVal, oldVal){
				console.log(newVal, oldVal);
				this.activeIndex = newVal
			}
		},
		data() {
			return {
				activeIndex:0
			}
		},
		methods:{
			clickTab(item, index){
				console.log(item,index)
				this.activeIndex=index;
				this.$emit('tab',{
					data:item,
					index:index
					})
			},
			open(){
				uni.navigateTo({
					url:"/pages/home-label/home-label"
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.tab{
	display: flex;
	width:100%;
	border-bottom:1px #f5f5f5 solid;
	background-color: #fff;
	box-sizing: border-box;
	
	.tab-croll{
		// tab撑满整个元素
		flex:1;
		overflow: hidden;
		box-sizing: border-box;
		.tab-scroll_box{
			display: flex;
			align-items:center;
			flex-wrap:nowrap;
			height:45px;
			box-sizing:border-box;
			
			.tab-scroll_item{
				// 避免内容挤压到
				flex-shrink:0;
				padding:0 10px;
				color:#333;
				font-size: 14px;
				
				&.active{
					color:$mk-base-color;
				}
			}
		}
	}
	
	
	.tab-icons{
		position:relative;
		display:flex;
		justify-content: center;
		align-item:center;
		width:45px;
		position: relative;
		//伪类
		&::after{
			content:'';
			position:absolute;
			top:12px;
			bottom:12px;
			left:0;
			width:1px;
			background-color: #ddd;
		}
		
		.icon{
			position:absolute;
			top:10px;
		}
	}
}
</style>
